<template>
  <div>
    <JcTitle name="我要报工" icon></JcTitle>
    <div class="content">
      <el-form ref="purchaseRef" :model="production" label-width="100px" disabled>
        <el-form-item label="单据日期">
          <el-input v-model.trim="production.fdate"/>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-input v-model.trim="production.fbillNo"/>
        </el-form-item>
        <el-form-item label="订单类型">
          <el-input v-model.trim="production.fbilltype"/>
        </el-form-item>
        <el-form-item label="客户订单号">
          <el-input v-model.trim="production.fpaezText"/>
        </el-form-item>
        <el-form-item label="工单编号">
          <el-input v-model.trim="production.fsrcbillno"/>
        </el-form-item>
        <el-form-item label="工单数量">
          <el-input v-model.trim="production.fmoqty"/>
        </el-form-item>
        <el-form-item label="部件">
          <el-input v-model.trim="production.fpart"/>
        </el-form-item>
        <el-form-item label="生产车间">
          <el-input v-model.trim="production.fworkshop"/>
        </el-form-item>
        <el-form-item label="助记码">
          <el-input v-model.trim="production.fmodel"/>
        </el-form-item>
        <el-form-item label="物料编码">
          <el-input v-model.trim="production.fnumber"/>
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input v-model.trim="production.fname"/>
        </el-form-item>
        <el-form-item label="物料规格">
          <el-input v-model.trim="production.fspecificaTion"/>
        </el-form-item>
        <el-form-item label="物料描述">
          <el-input v-model.trim="production.fdescripTion"/>
        </el-form-item>
        <el-form-item label="汇总合计">
          <el-input v-model.trim="production.huizongSum"/>
        </el-form-item>
        <el-form-item label="金额合计">
          <el-input v-model.trim="production.amountSum"/>
        </el-form-item>
      </el-form>
      <div>
        <sx-table
            serial
            :table-data="tableData"
            :table-header="tableHeader"
            tableSelection
            @selectionChange="handleSelectAll"
        >
          <template v-slot:tagSlot="col">
            <span v-if="col.scope.row.fpushqty===col.scope.row.fqty"
                  style="color: #22b91d">{{ col.scope.row.fpushqty }}</span>
            <span v-else style="color: #e73737">{{ col.scope.row.fpushqty }}</span>
          </template>
        </sx-table>
        <div style="margin-top: 20px;text-align: center">
          <el-button class="clasBtn" type="warning" @click="reloadCode">重新扫码</el-button>
          <el-button class="clasBtn" type="primary" @click="pushDown">报 工</el-button>
        </div>
      </div>
    </div>
    <el-dialog
        title="请扫码"
        :visible.sync="dialogVisible"
        width="500px"
        :close-on-click-modal="false"
        center
        :before-close="beforeClose">
      <div>
        <el-input
            ref="inpu"
            v-model="value"
            clearable
            placeholder="请扫描二维码"
            @keyup.enter.native="confirmNum"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmNum">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import JcTitle from "@/components/Title";
import {insertWorkReport, queryProcessDetailsByGroup} from "@/api/zhuye";

export default {
  components: {
    JcTitle
  },
  data() {
    return {
      value: '',
      dialogVisible: false,
      production: {},
      fentryData: [],
      tableData: [],
      tableHeader: [
        {label: '组别', prop: 'fgroupname', minWidth: '100px'},
        {label: '工序名称', prop: 'fprocessname', minWidth: '120px'},
        {label: '数量', prop: 'fqty', minWidth: '70px'},
        {label: '单价', prop: 'workprice', minWidth: '70px'},
        {label: '倍数', prop: 'fnum', minWidth: '70px'},
        {label: '汇总', prop: 'fprice', minWidth: '70px'},
        {label: '金额', prop: 'fsumprice', minWidth: '70px'},
        {label: '已完成数量', prop: 'fpushqty', type: 'tag', minWidth: '70px'},
        {label: '备注', type: 'state', prop: 'fremark', minWidth: '120px'}
      ]
    }
  },
  created() {
    this.dialogVisible = true
    setTimeout(() => {
      this.$refs.inpu.focus()
    }, 100)
  },
  methods: {
    // 详情
    confirmNum() {
      if (!this.value) return
      const DATA = {
        fid: this.value.split('UU')[0],
        groupId: this.value.split('UU')[1],
      }
      queryProcessDetailsByGroup(DATA).then(res => {
        if (res.code === 0) {
          this.production = res.data
          this.tableData = res.data.details
          this.dialogVisible = false
          this.production.huizongSum = 0
          this.production.amountSum = 0
          this.tableData.map(item => {
            item.workprice = item.fprice / item.fnum
            this.production.huizongSum += item.fprice
            this.production.amountSum += item.fsumprice
          })
          this.production.huizongSum = this.production.huizongSum.toFixed(2)
          this.production.amountSum = this.production.amountSum.toFixed(2)
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 多选
    handleSelectAll(val) {
      this.fentryData = []
      val.forEach(item => {
        this.fentryData.push(item.fentryid)
      })
    },
    // 下推报工
    pushDown() {
      if (this.fentryData.length === 0) {
        this.$confirm('请选择数据报工', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        return
      }
      const DATA = {
        SoucrceIds: [this.production.fid],
        EntryIds: this.fentryData,
        fbillTypeId: 246
      }
      insertWorkReport(DATA).then(res => {
        if (res.code === 0) {
          this.$router.push({
            path: `/workOrderDetail/${res.data}`
          })
          this.isdanjuDialog = false
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 重新扫码
    reloadCode() {
      this.dialogVisible = true
      this.value = ''
      setTimeout(() => {
        this.$refs.inpu.focus()
      }, 100)
    },
    beforeClose() {
      if (!this.value) {
        this.$refs.inpu.focus()
        return
      }
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  margin-top: 65px;
  padding: 10px;
}
</style>
